<template>
    <div class="content">
        <div id="cart-title">
            支付订单
        </div>
        <br>
        <div>
            <el-table :data="orders"
                      stripe
                      style="width: 100%">
                <el-table-column prop="OrderId"
                                 label="订单号"
                                 width="300">
                </el-table-column>
                <el-table-column prop="GoodsName"
                                 label="商品名"
                                 width="180">
                </el-table-column>
                <el-table-column prop="Count"
                                 label="数量">
                </el-table-column>
                <el-table-column prop="Total"
                                 label="总价">
                </el-table-column>
                <el-table-column label="详情"
                                 inline-template>
                    <el-tooltip class="item"
                                :content="addTest(row)"
                                placement="bottom-start"
                                effect="light">
                        <i class="el-icon-information">  </i>
                    </el-tooltip>
    
                </el-table-column>
            </el-table>
        </div>
        <div class="cart-sure">
            <p>商品总价：￥{{total}}</p>
            <p>邮费：￥0</p>
            <p>数量：{{totalNumber}}</p>
            <p class="cart-totle">总金额：￥{{total}}</p>
        </div>
        <a href="http://localhost:60861/#/PersonalCenter">
            <el-button class="cart-button-continue"
                       type="primary"
                       size="large">&nbsp;&nbsp;关闭订单&nbsp;&nbsp;</el-button>
        </a>
        <el-button class="cart-button"
                   type="primary"
                   size="large"
                   @click="pay()">&nbsp;&nbsp;确认付款&nbsp;&nbsp;</el-button>
    </div>
</template>
<style>

</style>
<script>
export default {
    data: function () {
        return {
            orders: [],
            total: 0,
            totalNumber: 0
        }
    },
    mounted: function () {
        var _this = this;
        if ($.cookie('front-token') == null) {
            window.location.href = 'http://localhost:60861/#/Login'
        } else {
            getgGoodsInfo: {
                var token = JSON.parse($.cookie('front-token'));
                $.ajax({
                    type: "Get",
                    url: "/api/Order/GetUserOrders",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        _this.total = 0;
                        _this.totalNumber = 0;
                        data.map(item => {
                            _this.total += item.Total;
                            _this.totalNumber += item.Count;
                        });
                        _this.orders = data;
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }
        }
    },
    methods: {

        addTest(order) {
            return "收货人：" + order.Consignee + "\n" + "联系电话：" + order.PhoneNumber + "\n" + "收货地址：" + order.DeliveryAddress + "\n" + "创建时间：" + order.CreateTime;
        },
        pay() {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Post",
                url: "/api/Order/PaymentOrders",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    if (data != "支付成功") {
                        _this.payFailed();
                    } else {
                        _this.paySuccess();
                        setTimeout("window.location.href = 'http://localhost:60861/#/PersonalCenter'", 1000)
                    }
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        },
        paySuccess() {
            this.$message({
                showClose: true,
                message: '支付成功',
                type: 'success'
            });
        },
        payFailed() {
            this.$message({
                showClose: true,
                message: '支付失败',
                type: 'error'
            });
        }
    }
}
</script>